<template>
  <div class="menu">
    <div class="menu-left">
      <ul>
        <li
          class="menu-item"
          v-for="(menu, index) in menus"
          :key="index"
          @click="clickList(index)"
          :class="{current :index === currentIndex}"
          ref="menuList"
        >
          <p class="text">{{ menu.name }}</p>
        </li>
      </ul>
    </div>
    <div class="menu-right" ref="itemList">
      <ul>
        <li class="cate" v-for="(menu, index1) in menus" :key="index1">
          <h4 class="cate-title">{{ menu.name }}</h4>
          <ul class="cate-item">
            <li v-for="(item, index2) in menu.children" :key="index2">
              <router-link
                class="cate-item-wrapper"
                :to="{ name: 'goodslist', params: { category_id:item.id }}"
              >
            <div class="cate-item-img">
              <img :src="item.picture"/>
            </div>
            <span>{{ item.name }}</span>
            </router-link>
            </li>
          </ul>
        </li>
        <li class="cate-bottom"></li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref,watch,nextTick,computed } from "vue";
import { getCategoryList } from "../api";
import BScroll from "@better-scroll/core";
const menus = ref([]);
const rightLiTops = ref([])
const itemList =ref()
const menuList = ref()
let leftBScroll = null
let rightBScroll = null
const scrollY = ref(0)


onMounted(() => {
  loadCategoryList();
  RightHeightFix()
});

// 监听
watch(menus,()=>{
  nextTick(()=>{
    initBScroll()
    initRightHeight()
  })
})
//获取分类数据
const loadCategoryList = async () => {
  let data = await getCategoryList();
  // 把一维数据转换为树形结构
  const treeData = convertToTree(data);
  menus.value = treeData;
};
//将一维数组转换成树形结构
const convertToTree = (data) => {
  const treeData = [];
  const map = {};
  for (const item of data) {
    map[item.id] = { ...item, children: [] };
  }
  for (const item of data) {
    const node = map[item.id];
    if (item.pid === 0) {
      treeData.push(node);
    } else {
      const parent = map[item.pid];
      parent.children.push(node);
    }
  }
  return treeData;
};

//单机左侧菜单项
const clickList = index =>{
  scrollY.value=rightLiTops.value[index]
  rightBScroll.scrollTo(0, -scrollY.value)
  
}
//初始化右侧菜单的高度
const initRightHeight = ()=>{
  const itemArray = []
  let top = 0
  itemArray.push(top)
  const allList = itemList.value.getElementsByClassName('cate')
  Array.prototype.slice.call(allList).forEach(li=>{
    top+=li.clientHeight
    itemArray.push(top)
  })
  rightLiTops.value = itemArray
}
const initBScroll= ()=>{
  
  leftBScroll = new BScroll('.menu-left',{
    click:true,
    mouseWheel:true
  })
  rightBScroll = new BScroll('.menu-right',{
    click:true,
    mouseWheel:true,
    probeType:3
  })
  rightBScroll.on('scroll',pos=>{
    scrollY.value = Math.abs(pos.y)
  })
}

const RightHeightFix =()=>{
  let bottom = itemList.value.getElementsByClassName('cate-bottom')[0]
  bottom.style.height = itemList.value.clientHeight /1.2 + 'px'
}

//右侧菜单栏滚动，左侧菜单栏联动
 const initLeftScroll = index=>{
  const menu = menuList.value
  let el = menu[index]
  leftBScroll.scrollToElement(el,300,0,-100)
 }

 const currentIndex =computed(()=>{
  return rightLiTops.value.findIndex((top,index)=>{
    if(index === rightLiTops.value.length - 2){
      return true
    }
    if(scrollY.value >= top && scrollY.value<rightLiTops.value[index+1]){
      initLeftScroll(index)
      return true
    }
  })
 })
</script>



<style lang="less" scoped>
ul {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.menu {
  display: flex;
  position: absolute;
  text-align: center;
  top: 46px;
  bottom: 50px;
  width: 100%;
  overflow: hidden;
  .menu-left {
    flex: 0 0 80px;
    width: 80px;
    background: #f3f5f7;
    line-height: 54px;
    .menu-item {
      height: 54px;
      width: 100%;
      border-bottom: 1px solid #e1e1e1;
      .text {
        width: 100%;
        margin: 0;
      }
    }
    .current {
      width: 100%;
      background: #fff;
      .text {
        color: red;
      }
    }
  }
  .menu-right {
    flex: 1;
    background: #fff;
    .cate {
      height: 100%;
      .cate-title {
        margin: 0;
        text-align: left;
        font-size: 14px;
        color: #333;
        font-weight: bold;
        padding: 10px;
      }
      .cate-item {
        padding: 7px 10px 10px;
        display: flex;
        overflow: hidden;
        flex-flow: row wrap;
        li {
          width: 33.3%;
          .cate-item-wrapper {
            .cate-item-img {
              width: 100%;
              img {
                width: 70px;
                height: 70px;
              }
            }
            span {
              display: inline-block;
              font-size: 14px;
              color: #333;
            }
          }
        }
      }
    }
  }
}
</style>
